<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生表</title>
</head>
<style>
    table{width: 100%;}
    td{text-align: center; padding: 5px 0;}
    .click_student{ text-align: center; padding-bottom: 10px;}
    .click_student > a,table tr td a{ text-decoration: none;}
</style>
<body>
<div class="click_student">
    <a href="/student_insert">点击添加学生</a>
    <a href="/logout">退出登录</a>
</div>

<table border="1px" cellpadding="0" cellspacing="0">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>sex</td>
        <td>age</td>
        <td>no</td>
        <td>class_name</td>
        <td>修改和删除</td>
    </tr>
    <tr id="no_data">
        <td colspan="6">暂无数据</td>
    </tr>
</table>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
    $.post('/api/students',function(res){
        if (res.code === 1) {
            var students = res.data;
            if (students.length > 0) {
                $("#no_data").hide();
            };
            var html = '';
            $.each(students, function(index, student) {
                var s_sex = student.sex;
                var st_sex = '';
                if (s_sex === 0) {
                    st_sex = "男";
                } 
                else if(s_sex === 1) {
                    st_sex = "女";
                }
                else{
                    st_sex = "未知"
                }
                html +=
                    '<tr>' +
                        '<td>' + (index + 1) + '</td>' +
                        '<td>' + student.name + '</td>' +
                        '<td>' + st_sex + '</td>' +
                        '<td>' + student.age + '</td>' +
                        '<td>' + student.no + '</td>' +
                        '<td>' + student.class_name + '</td>' +
                        '<td>' + 
                            '<a href="/student_updata?id=' + student.id + '">修改</a>'+
                            "&nbsp;" +
                            '<a href="javaScript:;" class="delete" data-id=' + student.id + ' data-name=' + student.name + '>删除</a>'
                        + '</td>' +
                    '</tr>';
            });
            $('tbody').append(html);
            $(".delete").click(function(){
                var $this = $(this);
                var name = $this.data("name");
                var yes = confirm("你确定删除" + name + "?");
                if (yes) {
                    var id = $this.data("id");
                    $.post('/api/student_delete', { id: id}, function(res) {
                        alert(res.msg);
                        if(res.code === 1){
                            $this.parent().parent().remove();
                            if ($('tbody > tr').length === 2) {
                                $("#no_data").show();
                            }
                        }
                    });
                }
            });
        } else {
            alert(res.msg);
        }
    });
});
</script>
</html>